<template>
  <el-row :gutter="15">
    <el-col :span="18">
      <el-card shadow="hover" class="my-card" style="height:415px;">
        <template #header>
          <div class="card-header">
            <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>

        <div id="chart1"></div>

      </el-card>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-card shadow="hover" class="my-card" >
        <template #header>
          <div class="card-header">
            <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>

        <div id="chart2"></div>

      </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="my-card" style="height:200px;">
        <template #header>
          <div class="card-header">
            <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>
      </el-card>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" class="my-card" style="height:200px;">
        <template #header>
          <div class="card-header">
            <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>
        <p>快捷入口内容</p>
      </el-card>

      <el-card shadow="hover" class="my-card" style="height:200px;">
        <template #header>
          <div class="card-header">
           <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>
        <p>公告内容</p>
      </el-card>

      <el-card shadow="hover" class="my-card" style="height:200px;">
        <template #header>
          <div class="card-header">
            <el-row  justify="space-between">
            <span>公告</span>
            <el-link type="primary">查看更多</el-link>
           </el-row>
          </div>
        </template>
        <p>文档中心内容</p>
      </el-card>
    </el-col>
  </el-row>
</template>

<!--
setup 语法糖，顶层的变量和方法，可以直接在 template 中使用，不需要返回
-->
<script lang="ts" setup>
import { Chart} from '@antv/g2';
import { ref ,onMounted } from 'vue';

onMounted(() => {


  // 折线图的数据
  const lineCharts = ref([
    { date: "2024-1", total: 1000 },
    { date: "2024-2", total: 3000 },
    { date: "2024-3", total: 7000 },
    { date: "2024-4", total: 9000 },
    { date: "2024-5", total: 6000 },
    { date: "2024-6", total: 2000 },
    { date: "2024-7", total: 8000 },
    { date: "2024-8", total: 6000 },
    { date: "2024-9", total: 1200 },
    { date: "2024-10", total: 4000 },
    { date: "2024-11", total: 8000 },
    { date: "2024-12", total: 2000 },
  ])

    const chart1 = new Chart({
    container: 'chart1',
    autoFit: true,
    height: 335,
  })

  chart1
    .data(lineCharts.value)
    .encode("x", "date")
    .encode("y", "total")
    .encode("color", "city")
    .scale("x", {
      range: [0, 1],
    })
    .scale("y", {
      nice: true,
    })
    .axis("y", { labelFormatter: (d: number) => (d / 1000) + "k" });

    chart1
    .line()
    .style({
      stroke: "#5b8ff9",
      lineWidth: 4,
    })
    .encode("shape", "smooth");

  chart1.render();


    // 饼图的数据
  const pieCharts = ref([
    { type: "纯文本", value: 148564, percent: 0.16 },
    { type: "图文类", value: 334271, percent: 0.36 },
    { type: "视频类", value: 445695, percent: 0.48 },
  ])
  const chart2 = new Chart({
    container: "chart2",
    height: 242,
    autoFit: true,
  });

  chart2.coordinate({ type: "theta", outerRadius: 0.8, innerRadius: 0.5 });

  chart2
    .interval()
    .data(pieCharts.value)
    .transform({ type: "stackY" })
    .encode("y", "percent")
    .encode("color", "type")
    .legend("color", {
      position: "bottom",
      layout: { justifyContent: "center" },
    })
    .label({
      position: "outside",
      text: (data: { type: string; percent: number; }) => `${data.type}: ${data.percent * 100}%`,
    })
    .tooltip((data) => ({
      name: data.type,
      value: `${data.value}`,
    }));

  chart2
    .text()
    .style("text", "内容量")
    .style("x", "50%")
    .style("y", "50%")
    .style("dy", -10)
    .style("fontSize", 14)
    .style("fill", "#666")
    .style("textAlign", "center");

  chart2
    .text()
    .style("text", "928,530")
    .style("x", "50%")
    .style("y", "50%")
    .style("dy", 10)
    .style("fontSize", 14)
    .style("fontWeight", 600)
    .style("fill", "#000")
    .style("textAlign", "center");

  chart2.render();

})



</script>


<style>
.my-card {
 margin-bottom: 15px;
 background-color: rgba(255, 255, 255, 0.5);
}
</style>
